<template>
  <div id="app">
    <h2>______________________APP___________</h2>
    <h2>{{message}}</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <!-- 可以用计算属性的方式获得 -->
    <h2>计算属性的方式：{{more20stu}}</h2>

    <h2>{{$store.state.idol}}</h2>
    <button @click="UpdateInfo">修改</button>
    <h2>______________________APP的getters相关信息___________</h2>
    <h2>直接获取：{{$store.state.counter}}</h2>
    <h2>通过getters运算获取：{{$store.getters.powerCounter}}</h2>
    <h2>getters的方式获取：{{$store.getters.more20stu}}</h2>
    <h2>length的方式获取长度：{{$store.getters.more20stu.length}}</h2>
    <h2>getters的方式获取长度：{{$store.getters.more20stuLength}}</h2>
    <h2>可以自己传参的getters：{{$store.getters.Agemore(50)}}</h2>
    <h2>______________________hello组件___________</h2>
    <hello></hello>
  </div>
</template>

<script>
import hello from "./components/hello";
import * as types from "./store/mutations-types";
export default {
  name: "App",
  components: {
    hello
  },
  data() {
    return {
      message: "我是app"
    };
  },
  computed: {
    more20stu() {
      return this.$store.state.students.filter(s => s.age > 20);
    }
  },
  methods: {
    add() {
      this.$store.commit("increment");
    },
    sub() {
      this.$store.commit("decrement");
    },
    addCount(num) {
      // this.$store.commit("incrementCount", num); //普通提交风格
      this.$store.commit({
        type: "incrementCount",
        num: num
      });
    },
    UpdateInfo() {
      //this.$store.commit("UpdateInfo");
      this.$store.dispatch("aUpdateInfo", "传递过来的数据").then(res => {
        console.log("执行完成");
        console.log(res);
      });
    }
  }
};
</script>

<style>
</style>
